<template>
  <div class="dialog" v-show="show" @click.self="close">
    <div class="dialog_class" :style="{ width, marginTop }">
      <div class="dialog-header">
        <slot name="title">
          <span>{{ title }} </span>
        </slot>
        <b class="b" @click="close">X</b>
      </div>
      <div class="dialog-body">
        <slot> 内容</slot>
      </div>
      <div class="dialog-footer">
        <slot name="foot" class="btn"> </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "reDialog",
  data() {
    return {
        
    };
  },
  methods:{
    close(){
        this.$emit('update:show',false)
    }
  },
  props: {
    title: {
      type: String,
      default: "提示",
    },
    width: {
      type: String,
      default: "60%",
    },
    marginTop: {
      type: String,
      default: "12vh",
    },
    show:{
        type:Boolean,
        default:false
    }
  },
};
</script>

<style>
.dialog {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(100, 100, 100, 0.5);
  display: flex;
  justify-content: center;
}
.dialog_class {
  height: 300px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
}
.b{
    position: absolute;
    right: 10px;
    top: 5px;
}
.dialog-body{
  padding-left: 20px;
}
.btn{
  float: right;
  margin-right: 20px;
}
</style>